import { Suspense } from 'react';
import { Navigate } from 'react-router';
import Admin from '@/layouts/Admin';
import BigScreen from '@/layouts/BigScreen';
import Login from '@/pages/Login';
import Loading from '@/components/Loading';
import NotFind from '@/pages/NotFind';
import type { RouteObject } from 'react-router';
import { ERouteId } from '@/types/router';
import { lazy } from 'react';
import { createHashRouter } from 'react-router';

const [Home] = [() => import('@/pages/Home')].map((item) => {
  const Comp = lazy(item);
  return () => (
    <Suspense fallback={<Loading />}>
      <Comp />
    </Suspense>
  );
});

const routers: Array<RouteObject> = [
  {
    path: '/',
    element: <Navigate to="/admin" />
  },
  {
    path: '/login',
    id: ERouteId.Login,
    element: <Login />
  },
  {
    path: '/admin',
    id: ERouteId.Admin,
    element: <Admin />,
    children: [
      {
        index: true,
        element: <Navigate to="home" />
      },
      {
        path: 'home',
        id: ERouteId.Home,
        element: <Home />
      },
      {
        path: '*',
        id: ERouteId.NotFind,
        element: <NotFind />
      }
    ]
  },
  {
    path: '/big-screen',
    id: ERouteId.BigScreen,
    element: <BigScreen />
  }
];

const router = createHashRouter(routers);

export default router;
